<template>
    <div>
        <topheader></topheader>
        <div class="container-fluid well">
            <div class="container">
                <div class="row">
                    <table class="table table-bordered t-ct" style="font-size:16px;table-layout:fixed">
                        <thead>
                            <tr>
                                <th width="20%">时间</th>
                                <th width="20%">支付金额</th>
                                <th width="30%">矿工地址</th>
                                <th width="30%">Tx ID</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="data in dataList" v-bind:key="data.txId">
                                <td style="word-break:break-word">
                                    {{data.payTime}}
                                </td>
                                <td style="word-break:break-word">
                                    {{data.payCount + " ZEC"}}
                                </td>
                                <td class="text-hidden">
                                    <a v-bind:href="'https://explorer.zcha.in/accounts/' + data.payName" target="_blank">{{data.payName}}</a>
                                </td>
                                <td class="text-hidden">
                                    <a v-bind:href="'https://explorer.zcha.in/transactions/' + data.txId" target="_blank">{{data.txId}}</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import topheader from '@/components/common/top_header.vue';
    let datas = [];
    let formatDate = function(dtime) {
        let timeStr = "";
        let t = new Date();
        t.setTime(dtime);
        timeStr += t.getFullYear();
        timeStr += "-";
        if(t.getMonth() < 9) {
            timeStr += ("0" + (t.getMonth() + 1));
        } else {
            timeStr += (t.getMonth() + 1);
        }
        timeStr += "-";
        timeStr += (t.getDate() < 10) ? ("0" + t.getDate()) : (t.getDate());
        timeStr += " ";
        timeStr += (t.getHours() < 10) ? ("0" + t.getHours()) : (t.getHours());
        timeStr += ":";
        timeStr += (t.getMinutes() < 10) ? ("0" + t.getMinutes()) : (t.getMinutes());
        timeStr += ":";
        timeStr += (t.getSeconds() < 10) ? ("0" + t.getSeconds()) : (t.getSeconds());
        return timeStr;
    }
    export default {
        name: "paylist",
        data() {
            return {
                dataList: []
            }
        },
        mounted() {
            let that = this;
            this.api.get({
                url: "/pool_payments.shtml",
                data: {},
                callback: function(data) {
                    if(data.hasOwnProperty("error")) {
                        return;
                    }
                    let tempData = data.datas;
                    for(let i = 0; i < tempData.length; i ++) {
                        for(var j in tempData[i].amounts) {
                            datas.push({
                                payTime: formatDate(tempData[i].time),
                                payName: j,
                                payCount: tempData[i].amounts[j],
                                txId: tempData[i].txid
                            });
                        }
                    }
                    that.dataList = datas.slice(0, 30);
                }
            });
        },
        components: {
            topheader
        }
    }
</script>